<template>
  <div class="orderDetail">
    <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="back"> </van-nav-bar>
    <van-card :price="goodDetail.sum" :title="goodDetail.title" :thumb="goodDetail.main_img">
      <template #tags>
        <div>出发时间 : {{ goodDetail.start_time }}</div>
      </template>
      <template #num>
        <div>人数 x {{ goodDetail.people }}</div>
      </template>
      <template #footer>
        <div>订单状态 : {{ goodDetail.statu | order }}</div>
      </template>
    </van-card>
    <van-steps :active="goodDetail.statu" v-if="goodDetail.statu <= 3">
      <van-step>预约出行</van-step>
      <van-step>确认订单</van-step>
      <van-step>用户出行</van-step>
      <van-step>订单完成</van-step>
    </van-steps>
    <van-steps direction="vertical" :active="goodDetail.statu">
      <van-step v-if="goodDetail.statu <= 3">
        <h3>顾客已预约</h3>
        <p>留言:</p>
        <span>{{ goodDetail.user_mark }}</span>
      </van-step>
      <van-step v-if="goodDetail.statu <= 3">
        <h3>商家已确认</h3>
      </van-step>
      <van-step v-if="goodDetail.statu <= 3">
        <h3>顾客已出行</h3>
      </van-step>
      <van-step v-if="goodDetail.statu <= 3">
        <h3>订单已完成</h3>
      </van-step>
      <van-step v-if="goodDetail.statu == 4">
        <h3>订单取消</h3>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
// 引入商品API
import { getOrderDtails } from '../server/order.js';

export default {
  props: ['oid'],
  data() {
    return {
      token: localStorage.getItem('token'),
      message: '我们会在九月份过去,届时请你们做好接待准备',
      // active: 3,
      oceanList: [],
      goodDetail: [], //保存商品详情
      detail_imgs: [], //保存商品详情
    };
  },
  async mounted() {
    // 获取订单信息
    await getOrderDtails(this.oid)
      .then((result) => {
        this.goodDetail = result[0];
        this.goodDetail.statu -= 1;
        this.goodDetail.start_time = this.moment(this.goodDetail.start_time).format('YYYY-MM-DD');
      })
      .catch((err) => console.log(err));
  },

  methods: {
    back() {
      this.$router.back();
    },
  },
  // 过滤器
  filters: {
    //订单状态过滤器
    order(oldVal) {
      switch (oldVal) {
        case 0:
          return '已预约';
        case 1:
          return '已确认';
        case 2:
          return '已出行';
        case 3:
          return '已完成';
        case 4:
          return '已取消';
      }
    },
  },
};
</script>
<style lang="scss">
.orderDetail {
  .van-nav-bar__text {
    font-size: 14px;
    color: #000;
  }
  .van-icon-arrow-left {
    color: #000;
  }

  .detail-title {
    padding: 24px 16px 26px;

    .good-title {
      font-size: 24px;
      font-weight: 900;
      line-height: 1.33;
      letter-spacing: 0;
      color: #544641;
    }

    .good-price {
      margin-top: 30px;
      height: 24px;
      font-size: 12px;
      line-height: 1.17;
      letter-spacing: 0;
      color: #918682;

      .num {
        float: left;

        & > span {
          font-size: 12px;
          font-weight: 500;
          font-style: normal;
          line-height: 1.33;
          color: #f06e6e;
          padding-right: 2px;
        }

        & > span:nth-child(2) {
          font-size: 24px;
          line-height: 1;
          font-style: oblique;
        }
      }

      .but-count {
        float: right;
        font-size: 12px;
        line-height: 2.17;
        letter-spacing: 0;
        text-align: right;
        color: #918682;
      }
    }
  }
  .van-step__title,
  h3,
  p {
    font-size: 15px;
    span,
    p {
      color: #544641;
    }
  }
  .card-list {
    height: 270px;
    overflow: auto;
    display: flex;
    padding: 5%;
    margin-left: 10%;
    &::-webkit-scrollbar {
      display: none;
    }

    .card-item {
      width: 240px;
      margin-right: 20px;

      .good-msg {
        height: 45%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .good-title {
          width: 100%;
          font-size: 20px;
          font-weight: 900;
          color: #544641;
        }

        .good-price {
          margin-top: 15px;

          .rmb-symbol {
            font-size: 12px;
            font-stretch: normal;
            line-height: 1;
            color: #f06e6e;
          }

          .rmb-price {
            font-size: 20px;
            font-style: italic;
            font-weight: 500;
            line-height: 0.9;
            color: #f06e6e;
          }

          .count {
            float: right;
            font-size: 12px;
            color: #918682;
          }
        }
      }
    }
  }
}
</style>
